<template>
  <!-- 催收执行页-案件信息模块-客户信息 -->
  <section class="component cust-info">
    <!-- 客户信息 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">客户信息</span>
    </el-row>
    <ul class="info-container">
      <li>
        <span>客户姓名</span>
        {{personalInfo.personalName}}
      </li>
      <li>
        <span>学历</span>
        {{personalInfo.education | dictConvert('Education')}}
      </li>
      <li>
        <span>婚姻状况</span>
        {{personalInfo.marital}}
      </li>
      <li>
        <span>手机号码</span>
        {{personalInfo.mobileNo}}
      </li>
      <li>
        <span>邮件地址</span>
        {{personalInfo.personalEmail}}
      </li>
      <li>
        <span>证件类型</span>
        {{personalInfo.idType | dictConvert('PersonalIdType')}}
      </li>
      <li>
        <span>证件号码</span>
        {{personalInfo.idCard}}
      </li>
      <li>
        <span>发证机关</span>
        {{personalInfo.idLicence}}
      </li>
      <li>
        <span>证件到期日</span>
        {{personalInfo.idCardExpirationDate}}
      </li>
      <li>
        <span>身份证地址</span>
        <el-tooltip :content="personalInfo.idCardAddress" class="textStyle" effect="dark" placement="top-start" style="padding:0px" v-if="personalInfo.idCardAddress&&personalInfo.idCardAddress.length>9">
          <span>{{personalInfo.idCardAddress| ellipsis(9)}}</span>
        </el-tooltip>
        <span v-else>{{personalInfo.idCardAddress}}</span>
      </li>
      <li>
        <span>家庭地址</span>
        <el-tooltip :content="personalInfo.houseAddress" class="textStyle" effect="dark" placement="top-start" style="padding:0px" v-if="personalInfo.houseAddress&&personalInfo.houseAddress.length>9">
          <span>{{personalInfo.houseAddress| ellipsis(9)}}</span>
        </el-tooltip>
        <span v-else>{{personalInfo.houseAddress}}</span>
      </li>
      <li>
        <span>居住地址</span>
        <el-tooltip :content="personalInfo.localAddress" class="textStyle" effect="dark" placement="top-start" style="padding:0px" v-if="personalInfo.localAddress&&personalInfo.localAddress.length>9">
          <span>{{personalInfo.localAddress| ellipsis(9)}}</span>
        </el-tooltip>
        <span v-else>{{personalInfo.localAddress}}</span>
      </li>
      <li>
        <span>家庭座机</span>
        {{personalInfo.localPhone}}
      </li>
      <li>
        <span>现住址迁入时间</span>
        {{personalInfo.currentLocalDate}}
      </li>
      <li>
        <span>现居住所有权</span>
        {{personalInfo.localHomePower}}
      </li>
      <li>
        <span>单位名称</span>
        {{personalInfo.companyName}}
      </li>
      <li>
        <span>单位地址</span>
        <el-tooltip :content="personalInfo.address" class="textStyle" effect="dark" placement="top-start" style="padding:0px" v-if="personalInfo.address&&personalInfo.address.length>9">
          <span>{{personalInfo.address| ellipsis(9)}}</span>
        </el-tooltip>
        <span v-else>{{personalInfo.address}}</span>
      </li>
      <li>
        <span>单位电话</span>
        {{personalInfo.phone}}
      </li>
      <li>
        <span>驾照号码</span>
        {{personalInfo.licenseNo}}
      </li>
      <li>
        <span>车牌号码</span>
        {{personalInfo.carNo}}
      </li>
    </ul>
    <!-- 客户开户信息及来源 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">开户信息</span>
    </el-row>
    <ul class="info-container">
      <li>
        <span>约定扣款账户名</span>
        {{personalBankInfo.deductionName}}
      </li>
      <li>
        <span>约定扣款账号</span>
        {{personalBankInfo.cardNumber}}
      </li>
      <li>
        <span>开户银行</span>
        {{personalBankInfo.depositBank}}
      </li>
      <li>
        <span>开户支行</span>
      </li>
    </ul>
    <!-- 房产信息 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">房产信息</span>
    </el-row>
    <ul class="info-container">
      <li>
        <span>房屋购置价</span>
        {{personalHouse.housePurchasePrice}}
      </li>
      <li>
        <span>房屋评估价</span>
        {{personalHouse.houseEvaluatePrice}}
      </li>
      <li>
        <span>首付金额</span>
        {{personalHouse.downPayment}}
      </li>
      <li>
        <span>房贷余额</span>
        {{personalHouse.loanBalance}}
      </li>
      <li>
        <span>房贷总期数</span>
        {{personalHouse.houseLoanPeriod}}
      </li>
      <li>
        <span>房贷已还款期数</span>
        {{personalHouse.repayPeriod}}
      </li>
      <li>
        <span>房贷月均还款额</span>
        {{personalHouse.monthRepayment}}
      </li>
      <li>
        <span>其他房产地址1</span>
        {{personalHouse.otherHouseAddr1}}
      </li>
      <li>
        <span>其他房产地址2</span>
        {{personalHouse.otherHouseAddr2}}
      </li>
      <li>
        <span>其他房产地址3</span>
        {{personalHouse.otherHouseAddr3}}
      </li>
      <li>
        <span>其他房产地址4</span>
        {{personalHouse.otherHouseAddr4}}
      </li>
    </ul>
    <!-- 收支状况 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">收支状况</span>
    </el-row>
    <ul class="info-container">
      <li>
        <span>月均薪资(税后)</span>
        {{personalIncome.monthSalary}}
      </li>
      <li>
        <span>公积金缴存单位</span>
        {{personalIncome.payCompany}}
      </li>
      <li>
        <span>缴存基数</span>
        {{personalIncome.payBase}}
      </li>
      <li>
        <span>公积金个人缴存额度</span>
        {{personalIncome.personalPayLimit}}
      </li>
      <li>
        <span>个人社保月均缴存额度</span>
        {{personalIncome.socialPayLimit}}
      </li>
      <li>
        <span>社保缴存比例</span>
        {{personalIncome.payProportion}}
      </li>
      <li>
        <span>月固定补助</span>
        {{personalIncome.monthSubsidy}}
      </li>
      <li>
        <span>年收入</span>
        {{personalIncome.annualIncome}}
      </li>
      <li>
        <span>家庭月收入</span>
        {{personalIncome.familyMonthIncome}}
      </li>
      <li>
        <span>每月租房/房贷费用</span>
        {{personalIncome.houseMonthCost}}
      </li>
    </ul>
    <!-- 联系人信息 -->
    <!-- <el-row>
      <div class="circle"></div>
      <span class="circle-title">联系人信息</span>
    </el-row>
    <data-box :maxHeight="115" :data="personalContacts">
      <template slot="columns">
        <el-table-column prop="relation" label="关系" :min-width="$helper.getColumnWidth(3)" >
        </el-table-column>
        <el-table-column prop="contName" label="姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="contAddress" label="住宅地址" :min-width="$helper.getColumnWidth(8)">
        </el-table-column>
        <el-table-column prop="phone" label="住宅电话" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
      </template>
    </data-box>-->
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service.ts";
import { DataGrid, DataGridItem } from "@zct1989/vue-component";
import DataBox from "~/components/common/data-box.vue";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    DataGrid,
    DataGridItem
  }
})
export default class CustInfo extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;

  private personalInfo: any = {};
  private personalBankInfo: any = {};
  private personalContacts: any[] = [];
  private personalHouse: any = {};
  private personalIncome: any = {};

  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.State private menuChannel;

  /**
   * 是否导入
   */
  private get isImport() {
    return MENU_CHANNEL.Case_imported === this.menuChannel;
  }

  private activated() {
    this.refreshData();
  }

  private refreshData() {
    this.getPersonalInfo();
    this.getBankInfo();
    // this.getContacts();
    this.getHouseInfo();
    this.getIncome();
  }

  /**
   * 获取客户信息
   */
  private getPersonalInfo() {
    if (this.menuChannel === MENU_CHANNEL.Case_imported) {
      this.dataImportExcelInfoService
        .getImportPersonalInfo(this.caseId)
        .subscribe(data => (this.personalInfo = data));
    } else {
      this.caseOperatorPageService
        .personalInfo(this.caseId)
        .subscribe(data => (this.personalInfo = data));
    }
  }

  /**
   * 获取客户开户信息
   */
  private getBankInfo() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalBank(this.caseId)
        .subscribe(data => (this.personalBankInfo = data));
    } else {
      this.caseOperatorPageService
        .personalBankInfo(this.caseId)
        .subscribe(data => (this.personalBankInfo = data));
    }
  }

  /**
   * 获取联系人信息
   */
  private getContacts() {
    console.log('getContacts');

    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalContacts(this.caseId)
        .subscribe(data => {
          this.personalContacts = data;
        });
    } else {
      this.caseOperatorPageService
        .personalContacts(this.caseId)
        .subscribe(data => (this.personalContacts = data));
    }
  }

  /**
   * 获取客户房产信息
   */
  private getHouseInfo() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalHouse(this.caseId)
        .subscribe(data => (this.personalHouse = data));
    } else {
      this.caseOperatorPageService
        .queryPersonalHouse(this.caseId)
        .subscribe(data => (this.personalHouse = data));
    }
  }

  /**
   * 获取客户收支状况
   */
  private getIncome() {
    if (this.isImport) {
      this.dataImportExcelInfoService
        .getImportPersonalIncome(this.caseId)
        .subscribe(data => (this.personalIncome = data));
    } else {
      this.caseOperatorPageService
        .queryPersonalIncome(this.caseId)
        .subscribe(data => (this.personalIncome = data));
    }
  }
}
</script>

<style lang="less" scoped>
.component.cust-info {
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 15px;
    margin-right: 5px;
    background-color: #28313e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    vertical-align: middle;
  }

  .circle-title {
    font-size: 14px;
    line-height: 13px;
    color: #28313e;
  }
  .info-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-column-gap: 5px;
    grid-row-gap: 2px;
    list-style: none;
    li {
      > :first-child {
        color: #606266;
        &:after {
          content: "：";
        }
      }
    }
  }
}
</style>
